<section class="super-xjh dark-bg">
  <nz-spin nzSimple *ngIf="sliceMax === 0" class="position-center" />

  <header class="sheader dark-bg">
    <div class="headerbox">
      <div class="hitem">
        <img class="logo" [src]="LOGO_CDN" />
        <span class="title dark-white">{{ settings.superTitle || title }}</span>
      </div>

      <div class="topnav dark-scrollbar">
        <div
          *ngFor="
            let item of websiteList.slice(0, overIndex);
            index as i;
            trackBy: trackByItem
          "
          (click)="handleCilckTopMenu(i)"
          [class.active]="page === i"
          [class.dark-text-active]="page === i"
          class="hitem over-item dark-text"
        >
          {{ item.title }}
        </div>
        <!-- More -->
        <app-web-more-menu
          *ngIf="overIndex < websiteList.length"
          [data]="websiteList.slice(overIndex, 99999)"
          [index]="overIndex"
          [page]="page"
          (onClick)="handleCilckTopMenu($event)"
          class="flex-center"
        />
      </div>
    </div>
  </header>

  <div class="main-box">
    <div
      class="left dark-bg dark-border-color dark-scrollbar"
      *ngIf="websiteList[page]"
    >
      <div
        class="bar-item dark-text dark-hover ellipsis"
        [class.active]="id === i"
        [class.dark-item-active]="id === i"
        (click)="handleSidebarNav(i)"
        *ngFor="
          let item of websiteList[page].nav;
          index as i;
          trackBy: trackByItem
        "
      >
        <img *ngIf="item.icon" class="sideicon" [src]="item.icon" />
        <span class="ellipsis">{{ item.title }}</span>
      </div>
    </div>

    <div
      class="middle dark-bg"
      [class.noads]="settings.superImages.length <= 0"
    >
      <div class="search-t dark-border-color">
        <app-search-engine size="small"></app-search-engine>
        <div class="bar dark-scrollbar">
          <div
            class="bar-item"
            *ngFor="let item of currentList; index as i; trackBy: trackByItem"
            [class.active]="selectedIndex === i"
            [class.none]="!item.title"
            (click)="handleCheckThree(i)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>

      <div *ngIf="currentList[selectedIndex]?.nav?.length; else noData">
        <app-card
          *ngFor="
            let el of currentList[selectedIndex].nav;
            index as j;
            trackBy: trackByItemWeb
          "
          [indexs]="[page, id, selectedIndex, j]"
          [cardStyle]="settings.superCardStyle"
          [dataSource]="el"
          [searchKeyword]="searchKeyword"
        ></app-card>
      </div>
      <ng-template #noData>
        <app-no-data></app-no-data>
      </ng-template>

      <div
        class="apply"
        *ngIf="
          currentList.length &&
          currentList[0].title &&
          (isLogin || settings.allowCollect)
        "
      >
        <span class="appbtn" (click)="openCreateWebModal()">{{
          isLogin ? $t('_add') : $t('_apply')
        }}</span>
      </div>
    </div>

    <div class="right dark-scrollbar" *ngIf="settings.superImages.length > 0">
      <div class="aditem" *ngFor="let item of settings.superImages; index as i">
        <a
          [href]="item['url'] || 'javascript:void(0)'"
          [target]="item['url'] ? '_blank' : '_self'"
        >
          <img class="adsimg" [src]="item['src']" />
        </a>
      </div>
    </div>
  </div>

  <app-footer [content]="settings.superFooterHTML"></app-footer>

  <app-fixbar [showCollapse]="false"> </app-fixbar>
</section>
